<template>
	<view style="height: 100%;">
		<!-- <button @click="popupWindowCart()">打开弹出层</button> -->
		<view class="yinying" v-if="popupCartFlag" @click="clickYinyin()"></view>
		<view class="cart-popup" v-if="popupCartFlag">
			<view style="line-height: 70upx;display: flex;justify-content: space-between;padding: 10upx;">
				<view>所选商品</view>
				<view style="display: flex;align-items: center;" @click="deleteAllGoods()">
					<image style="width: 40upx;height: 40upx;margin-right: 10upx;" src="../../static/images/delete.svg" mode="aspectFit"></image>
					<text>删除商品</text>
				</view>
			</view>
			<view style="height: 100%; ">
				<scroll-view class="scroll-view-left" scroll-y="true"  scroll-with-animation="true" style="height: 100%;">
				<block v-for="(category, index) in sellerInfo.categoryList" :key="index">
					<!-- 获取商品类别 -->
					<!-- <view id="c1" :class="{active_goods_category:goodsCategoryNum==index}" @click="clickGoodsCategory(index, category.categoryName)">{{category.categoryName}}</view> -->
					<!-- 商品类别名字  添加锚点,让左边能够快速的定位 -->
					<block v-for="(product, pindex) in category.proInfoList" :key="pindex">
						<view  class="right-item" v-if="getCount(product)!=0">
							<!-- 商品信息展示   clickSellerGoodsImage方法展示商品的具体信息-->
							<view  class="right-image" @click="clickSellerGoodsImage()">
								<image style="width: 200upx;height: 200upx;" :src="product.productIcon"></image>
							</view>
							<view class="right-content">
								<view class="view1">
									<text style="text-overflow: ellipsis;">{{product.productName}}</text>
								</view>
								<view class="view2">
									<text>月售124</text>
								</view>
								<view class="content-count">
									<view>
										<text>￥{{product.productPrice?product.productPrice:0}}</text>
									</view>
									<view>
										<!-- <uni-number-box style="background: #2979FF;" v-model="itemNum.num"></uni-number-box> -->  <!-- product.productCount -->
										<uni-number-box style="background: #2979FF;" :value="getCount(product)" @change="change($event, product)" :key="product.productId"></uni-number-box>
										<!-- <uni-number-box style="background: #2979FF;" :value="getCount(product)" @change="change($event, product)" :key="product.productId"></uni-number-box> -->
									</view>
									<!-- <button @click="clickTest(product)">测试</button> -->
								</view>
							</view>
						</view>
					</block>
				</block>
						<!-- 作用：跳出底部的安全距离 -->
						<view style="height: 300upx;" ></view>
				</scroll-view>
			</view>
		</view>
		<!-- 点菜评价等等  :class="active_top_title: titleNum == 0" -->
		<view class="top-title">
			<view class="title-bottom" :class="{active_top_title:titleNum == 0}" @click="clickTopTitleOrder()">
				<text>点菜</text>
				<view></view>
			</view>
			<view class="title-bottom" :class="{active_top_title:titleNum == 1}" @click="clickTopTitleEvaluate()">
				<text>评价</text>
				<view></view>
			</view>
		</view>
	
		<!-- 辅助查找组件 -->
		<!-- <Sellerhelp class="split-page"></Sellerhelp> -->
		<!-- 商品信息展示 -->
		<view v-if="showInfoOrComment" class="qiehuan">
			<!-- 商品类目展示 -->
			<scroll-view class="scroll-view-left" scroll-y="true"  scroll-with-animation="true"  >
				<block v-for="(category, index) in sellerInfo.categoryList" :key="index">
					<view id="c1" :class="{active_goods_category:goodsCategoryNum==index}" @click="clickGoodsCategory(index, category.categoryName)">{{category.categoryName}}</view>
				</block>
				<!-- 这样的话可以拉到低 -->
				<view style="height: 200upx;"></view>
			</scroll-view>
			<!-- 商品具体信息展示 -->
			<scroll-view class="scroll-view-right" scroll-y="true" :scroll-into-view="toLeftScorllTop" scroll-with-animation="true">
				<block v-for="(category, index) in sellerInfo.categoryList" :key="index">
					<!-- 获取商品类别 -->
					<!-- <view id="c1" :class="{active_goods_category:goodsCategoryNum==index}" @click="clickGoodsCategory(index, category.categoryName)">{{category.categoryName}}</view> -->
					<!-- 商品类别名字  添加锚点,让左边能够快速的定位 -->
					<view style="margin-bottom: 20upx;" :id="`c_` +　category.categoryId">
						<text>{{category.categoryName}}</text>
					</view>
					<block v-for="(product, pindex) in category.proInfoList" :key="pindex">
						<view  class="right-item"  @click="clickSellerGoodsImage(product)">
							<!-- 商品信息展示   clickSellerGoodsImage方法展示商品的具体信息-->
							<view  class="right-image">
								<image style="width: 200upx;height: 200upx;" :src="product.productIcon"></image>
							</view>
							<view class="right-content">
								<view class="view1">
									<text style="text-overflow: ellipsis;">{{product.productName}}</text>
								</view>
								<view class="view2">
									<text>月售124</text>
								</view>
								<view class="content-count">
									<view>
										<text>￥{{product.productPrice?product.productPrice:0}}</text>
									</view>
									<!-- 防止事件冒泡 -->
									<view @click.stop="">
										<!-- <uni-number-box style="background: #2979FF;" product.productCount v-model="itemNum.num"></uni-number-box> -->
										<uni-number-box style="background: #2979FF;" :value="getCount(product)" @change="change($event, product)" :key="product.productId"></uni-number-box>
										<!-- <uni-number-box style="background: #2979FF;" :model="itemNum" @change="change($event, product)"></uni-number-box> -->
									</view>
									<!-- <button @click="clickTest(product)">测试</button> getCount(product)-->
								</view>
							</view>
						</view>
					</block>
				</block>
				
				<!-- 这样的话可以拉到低 -->
				<view style="height: 200upx;"></view>
			</scroll-view>
		</view>
		
		<!-- 评论信息展示 -->
		<view v-else-if="!showInfoOrComment" class="commment-class" style="padding-left: 20upx;padding-right: 20upx;">
			
			<scroll-view class="scroll-view-comment" scroll-y="true"  scroll-with-animation="true" @scrolltolower="getMoreComment()">
				<!-- <view>
					商家评分，收藏量
				</view> -->
			
				
				<block v-for="comment in commmentList" :key="comment.commentId">
					<view style="margin-top: 20upx;width: 100%;">
						<!-- {{commment.avatar}} -->
						<view style="display:flex;justify-content: flex-start;width: 100%;">
							<view>
								<!-- <image style="width: 80upx;height: 80upx;" :src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></image> -->
								<image v-if="comment.anonymousComment" style="border-radius: 50upx;width: 80upx;height: 80upx;" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></image>
								<image v-else="comment.anonymousComment" style="border-radius: 50upx;width: 80upx;height: 80upx;" mode="widthFix" :src="comment.avatar"></image>
							</view>
							<view style="margin-left: 20upx;width: 100%;">
								<view class="both-sides">
									<view>
										<view v-if="comment.anonymousComment">匿名用户</view>
										<view v-else>{{comment.nickname}}</view>
									</view>
									<view >{{comment.createTime.substring(0, 10)}}</view>
								</view>
								<view>
									<uni-rate :readonly="true" size="15" :value="comment.star" />
								</view>
							</view>
							
						</view>
						<view style="margin-left: 100upx;">
							<view v-if="comment.buyerContent">
								<text>用户评论：{{comment.buyerContent}}</text>
							</view>
							<view style="margin-top: 5upx;background-color: #EFF3F4;" v-if="comment.sellerComment">
								<text>商家回复：{{comment.sellerComment}}</text>
							</view>
							
							<view style="display: flex; justify-content: flex-start;flex-wrap: wrap;">
								<!-- 评价图片 -->
									<!-- {{comment.pictureUrl}} -->
									<!-- {{splitPicUrl(comment.pictureUrl)}} -->
								<!-- <image mode="widthFix" style="margin-top:10upx;width: 20%;margin-right: 8%;" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></image> -->
								<block v-for="(picUrl,index) in splitPicUrl(comment.pictureUrl)" :key="index">								
									<image mode="widthFix" style="margin-top:10upx;width: 20%;margin-right: 8%;" :src="picUrl"></image>
								</block>	        
							</view>
						</view>
						
					</view>
				</block>
				
				<view v-if="commentShow" style="height: 200upx;margin-top: 50upx;display: flex;justify-content: center;color: #666666; font-size: 18upx;">
					<text>~~~没有数据了~~~</text>
				</view>
			</scroll-view>
			
		</view>
		
		<!-- 商家商品具体信息展示 ，需要请求后端获取数据 if会重建，show会重新显示-->
		<view class="product-shadow" v-if="goodsShadowFlag" @click="flagGoodsShadow">
			
		</view>
		
		<!-- 商品信息弹窗 -->
		<view class="productInfo-popup" @click="productInfoPopup" v-if="goodsShadowFlag" style="padding: 20upx;">
			<view style="line-height: 70upx;font-size: 50upx;">
				<text style="margin-left: 0;">{{showProduct.productName}}</text>
			</view>
			<view style="width: 100%;margin-top: 10upx;">
				<image :src="showProduct.productIcon" style="width: 100%;height: 100%;" mode="widthFix"></image>
			</view>
			
			<view style="color:#A5A4A4;margin-top: 10upx;">
				<text>{{showProduct.productDescription}}</text>
			</view>
			
			<view style="display: flex;justify-content: space-between;width: 100%; align-items: center;">
				<view style="line-height: 70upx;font-size: 50upx;color: red;">
					￥{{showProduct.productPrice}}
				</view>
				<view>
					<uni-number-box style="background: #2979FF;" :value="getCount(showProduct)" @change="change($event, showProduct)" :key="showProduct.productId" />
				</view>
			</view>
		</view>
		
		
		<!-- 添加商品的购物车 -->
		<view class="buyer-cart">
			<view class="cart-content">
				<!-- 弹出购物车 -->
				<view class="cart-image-text" @click="popupCart()">
					<uni-badge :text="getCartTotalPrice" absolute="rightTop"  maxNum="99" type="error">
						<image style="width: 120upx;height: 120upx;margin-left: 5upx;margin-top: 5upx;" src="../../static/images/cart.svg"></image>
					</uni-badge>
					<!-- 商品的总和 -->
					<!-- cartCount: 0, // 购物车加入商品的总数 -->
					<!-- cartTotalPrice: 0, // 购物车的商品金额总量 -->
					<view  class="cart-text-first">
						<text>￥{{cartTotalPrice}}</text>
						<text>预计99元减￥0.1</text>
					</view>
				</view>
				
				<view class="check-out-content" @click="checkOutCart()">
					<text>去结账</text>
					<text>好友结账</text>
				</view>
			</view>
		</view>
		
		
		<!-- <Sellerhelp></Sellerhelp> -->
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	
	// 加入辅助的组件
	import Sellerhelp from './sellerhelp.vue';
	
	import {getRequest, getPost} from '../../api/api.js'; // 请求接口
	import {getSellerComment,updateCart, cartBySellerAndMember, getSellerInfo, sellerMemberShowList, productDetails, createredisUrl} from '../../api/request.js'; // 请求路径
	
	export default {
		components: {
			Sellerhelp
		},
		data() {
			return {
				commentShow: false, // 评论信息展示提示
				commmentList: [],
				queryParam: {
					pageNum: 0,
					pageSize: 5
				},
				showInfoOrComment: true, // 展示商品信息还是商家评论
				goodsShadowFlag: false, // 默认不显示
				goodsInfoFlag: false, // 商品信息默认不展示
				showProduct: {
					productCount: 0,
					productDescription: "goods",
					productIcon: "http://localhost:8009/images/seller/822df53f-bf7e-4634-820c-9870c54e8098.jpg",
					productId: "12543136",
					productName: "爆炒腊肠",
					productPrice: 12.4,
					productStatus: 0
				},
				sellerInfo: {
					cartPrice: 0.00, // 购物车总价格
					sellerId: '',
					categoryList: []
				},
				popupCartFlag: false, // 是否开启弹窗
				cartCount: 0, // 购物车加入商品的总数
				cartTotalPrice: 0.00, // 购物车的商品金额总量
				titleNum: 0, // 点餐和评价的初始界面
				goodsCategoryNum: 0, // 商品的类型唯一标识
				itemNum: 0,
				swiperheight: 0,
				splitPageTop: 0,
				windowHeight: 0,
				
				toLeftScorllTop: "c0",
				
				// 购物车容器
				cartList: [
					{
						productId: "12543135",
						productPrice: 12.4,
						count: 10,
						productIcon: 'http://localhost:8009/images/seller/822df53f-bf7e-4634-820c-9870c54e8098.jpg'
					}
				]
			}
		},
		methods: {
			// 获取更多的评论
			getMoreComment() {
				this.getComment();
			},
			
			splitPicUrl(str) {
				console.log(str.split(","));
				return str.split(",");
			}
			,
			// 获取商家评论
			getComment() {
				console.log(getSellerComment+`${this.sellerInfo.sellerId}?pageNum=${this.queryParam.pageNum}&pageSize=${this.queryParam.pageSize}`);
				getRequest(getSellerComment+`${this.sellerInfo.sellerId}?pageNum=${this.queryParam.pageNum}&pageSize=${this.queryParam.pageSize}`)
					.then((res)=> {
						console.log("评论");
						// console.log(res);
						
						
						
						console.log(res.data)
						console.log(this.queryParam.pageNum+" " + this.queryParam.pageSize)
						console.log((this.queryParam.pageNum*this.queryParam.pageSize) + "=====" + res.data.total)
						if(res.data.rows.length != 0 && res.data.total >= (this.queryParam.pageNum*this.queryParam.pageSize)) { // 没有数据量
							this.queryParam.pageNum++;
							this.commmentList.push(...res.data.rows);
							console.log("分页");
							console.log(this.commmentList);
							this.commentShow = false;
						} else {
							this.commentShow = true;
						}
						
					})
					.catch((err)=> {
						
					})
			},
			
			// 点击阴影部分，商品展示消息
			flagGoodsShadow() {
				this.goodsShadowFlag  = false; // 阴影关闭
				this.goodsInfoFlag = false; // 商品展示关闭
			},
			
			// 商品面板点击
			productInfoPopup() {
				
			},
			
			// 获取购物车以及商品对应的商品数量
			getCart() {
				
				// 获取购物车，然后将购物车中的数量重新将商家的数据进行
				// 使用vuex数据仓库进行获取当前页面的值
/* 				getPost(cartBySellerAndMember+ this.sellerInfo.sellerId)
					.then((res)=> {
						console.log("=========================");
						console.log(res); // 这是购物车数据
						// 
					})
					.catch((err)=> {
						
					})
				// 商家数据  拼接
				getPost(getSellerInfo+this.sellerInfo.sellerId)
					.then((res)=> {
						console.log("商家数据");
						console.log(res);
						this.sellerInfo = res.data.data.list;
					})
					.catch((err)=> {
						
					}) */
					
				// 上面的需要进行进行Promise.all([])处理
				// Promise.all([getPost(cartBySellerAndMember+ this.sellerInfo.sellerId), getPost(getSellerInfo+this.sellerInfo.sellerId)])
				// 	.then((res)=> {
				// 		console.log("-------------1221");
				// 		console.log(res);
				// 		let productCart = res[0].data.data.cart.productInfo; // 商家购物车
				// 		let {categoryList, nickname, sellerIcon, sellerId, username} = res[1].data.data.list;
				// 		for(let i in categoryList) {
				// 			// 商品类目
				// 			let arrProd = categoryList[i].proInfoList;
				// 			for(let j in arrProd) {
				// 				// arrProd[j].productId 是展示的商品
				// 				// 遍历购物商品
				// 				for(let x in productCart) {
				// 					if(productCart[x].productId === arrProd[j].productId) {
				// 						console.log(arrProd[j].productId);
				// 						// 将购物车的数量显示给商品列表
				// 						arrProd[j].productCount = productCart[x].count;
				// 					}
				// 				}
				// 			}
				// 		}
				// 		// 将值进行赋值给页面显示的对象
				// 		console.log(res[1].data.data.list);
				// 		this.sellerInfo = res[1].data.data.list;
				// 	})
					
			},
		
			getCount(product) {
				console.log(product.productCount)
				return product.productCount;
			},
			
			// 点击测试
			clickTest(product) {
				// product.productPriceproductCount
				// product.productCount++;
				console.log(product.productCount  + "改变");
				// itemNum.num++;
				// console.log(itemNum.num);
			},
			
			clickSwiperView() {
				console.log(this.sellerGoodsTop);
			},
			
			/* 点餐标签 */
			clickTopTitleOrder() {
				this.titleNum = 0;
				console.log("点击了点餐");
				this.showInfoOrComment = true;
			},
			
			/* 评价标签 */
			clickTopTitleEvaluate() {
				this.titleNum = 1;
				this.showInfoOrComment = false;
				console.log("点击了评价" + this.sellerInfo.sellerId);
				if(this.commmentList.length == 0) {
					this.getComment();
				}
			},
			
			/* 点击了商品类型 */
			clickGoodsCategory(index, name) {
				this.goodsCategoryNum = `${index}`;
				this.toLeftScorllTop = `c_${index}`;
				console.log(`点击了商品类型下标${index} ${name}`);
			},
			
			/* 点击了商家的商品图片 */
			clickSellerGoodsImage(product) {
				console.log("点击了商家的商品信息图片");
				// this.toLeftScorllTop = "c0";
				// this.goodsCategoryNum = 0;
				console.log("跳转到商家产品类型锚点c0 0");
				console.log(product.productId);
				
				// 请求后端。
				getRequest(productDetails+product.productId)
					.then((res)=> {
						console.log(res.data.data.productInfo);
						// 最新的数据
						this.showProduct = product;
						this.showProduct.productIcon = res.data.data.productInfo.productIcon; 
						this.showProduct.productName = res.data.data.productInfo.productName;
						this.showProduct.productDescription = res.data.data.productInfo.productDescription;
						this.showProduct.productPrice = res.data.data.productInfo.productPrice;
						
						// 设置阴影部分
						this.goodsShadowFlag = true; // 默认不显示
						// 设置弹窗
						this.goodsInfoFlag = true; // 商品信息默认不展示
					})
				
			},
			
			// 点击结账，功能不全暂时改变为购物车数量++
			checkOutCart() {
				// console.log("点击了结账，模拟商品+1");
				console.log("点击了结账，商家编号：" + this.sellerInfo.sellerId);
				
				// 检验是否登录
				
				// 提交购物车生成订单后跳转
				// let orderDTO = {
				// 	buyerOpenid: '1231',
				// 	sellerId: this.sellerInfo.sellerId
				// };
				
				// console.log(orderDTO)
				getPost(createredisUrl, this.sellerInfo.sellerId)
					.then((res)=> {
						console.log("点击了购物车");
						console.log(res.data.data.orderId);
						// this.cartCount=this.cartCount+1;
						uni.navigateTo({
							url: '/pages/order/createorder?orderId='+res.data.data.orderId,
							animationType: 'pop-in',
							animationDuration: 200
						});
					})
					.catch((err)=> {
						
					})
				

			},
			
			// 弹出购物车
			popupCart() {
				console.log("点击了购物车");
				// 弹出购物车
				this.popupWindowCart();
			},
			
			// 购物车弹窗事件start
			 openPopup(){
				// this.$refs.popup.open()
			},
			closePopup(){
				// this.$refs.popup.close()
			},
			// 购物车弹窗事件end
			
			// 这是一个购物车的弹窗事件，， 
			popupWindowCart() {
				this.popupCartFlag = !this.popupCartFlag;
			},
			
			// 点击阴影之后进行购物车弹窗的关闭
			clickYinyin() {
				this.popupCartFlag = !this.popupCartFlag;
			},
			
			// 删除购物车的所有商品
			deleteAllGoods() {
				console.log("删除购物车的所有商品");
			},
			
			// 改变值
			change(value, product) {
				//  // console.log(this).value;
				product.productCount = value;
				
				console.log(product.productCount + " " + value);
				
				let cartFormDTO = {
					sellerId: this.sellerInfo.sellerId,
					// memberId: '13',
					productInfo: []
				};
				
				console.log("================---------------------")
				// 并且发送请求给后台。更新redis中的对应商家的订单
				let caegoryList = this.sellerInfo.categoryList;
				for(let i in caegoryList) { //遍历商品类别
					let productList = caegoryList[i].proInfoList;
					  for(let j in productList) {
							if(parseInt(productList[j].productCount) !== 0 ) {
								let product = {
									productId: productList[j].productId,
									// count: productList[j].productCount,
									productQuantity: productList[j].productCount,
								}
								cartFormDTO.productInfo.push(product);
							}
					  }
				}
				console.log(cartFormDTO);
				getPost(updateCart, cartFormDTO)
					.then((res)=> {
						console.log("发送了购物车");
						console.log(res);
						console.log(res.data.data.totalPrice);
						this.cartTotalPrice = res.data.data.totalPrice;
						
					})
			 },
			 // 获取商家和会员的购物车拼接的商品数量进行展示
			 getFirstShowProduct() {
				 Promise.all([ getRequest(sellerMemberShowList+this.sellerInfo.sellerId)])
					.then((res)=> {
						console.log("======================")
						// console.log(res[0].data.data)
				
						this.sellerInfo = res[0].data.data.list;
						
						this.cartTotalPrice = this.sellerInfo.cartPrice;
						
						// if(res[0].data.data.code === 20000) {
						// 	// console.log(this).value;	
						// }

					})
					.catch((err)=> {
					})
			 }
 		},
		
	
		// 当前组件页面onLoad方法不进行生效
		mounted:function(){
			console.log("我被加载了,接收到的参数：" + this.sellerInfo.sellerId);
			
			this.getFirstShowProduct();
			// 监听筛选组件距离顶部的距离
			uni.getSystemInfo({
				success: function (res) {
					
					// console.log(res.windowHeight);
					// sellerGoodsTop
					// this.windowHeight = res.windowHeight;
				}
			});
			
			// this.getCart();


	
		},
		
		
		
		
		// 计算属性
		computed: {
			// ES6中获取属性语法
			...mapState(['gloalSellerId']),
			
			// 取出得到数据
			countp() {
				this.sellerInfo.sellerId = this.gloalSellerId.sellerId;
				
			},
			
			getCartTotalPrice() {
				// console.log(caegoryList);
				let allPrice = 0.00;
				let allNum = 0;
				let caegoryList = this.sellerInfo.categoryList;
				// if(this.sellerInfo.categoryList typeof undefined) {
				// 	return 0.00;
				// }
				for(let i in caegoryList) { //遍历商品类别
					let productList = caegoryList[i].proInfoList;
					  for(let j in productList) {
						  // console.log(productList[j].productId + " " + productList[j].productCount + " " + productList[j].productPrice)
							allNum += productList[j].productCount;
							if(parseInt(productList[j].productCount) !== 0 ) {
								// Math.floor(parseFloat(price*100 * quantity))/100; 向下取整  toFixed(4)
								// allPrice +=Math.floor(
								allPrice += productList[j].productPrice*productList[j].productCount;
								// allPrice = 
							    // allPrice = parseFloat(allPrice+productList[j].productPrice*productList[j].productCount).toFixed(2);
							}
							
					  }
				}
				// cartCount: 0, // 购物车加入商品的总数
				// cartTotalPrice: 0, // 购物车的商品金额总量
				this.cartCount = allNum;
				// this.cartTotalPrice = parseFloat(allPrice).toFixed(2);
				
				
				return allNum;
			},
			
			// getCartCount() {
			// 	return this.cartCount;
			// }
		},
		
		
		watch:{
		  sellerInfo:{ //监听的对象
		    deep:true, //深度监听设置为 true
		    handler:function(newV,oldV){
		      // console.log('watch中：',newV)
 		    }
		  }
		},
	}
</script>

<style scoped>
	.top-title {
		display: flex;
		justify-content: flex-start;
	}
	
	.title-bottom {
		margin-left: 20upx;
	}
	
	.title-bottom text {
		line-height: 70upx;
		font-weight: bold;
		font-size: 35upx;
	}
	
	.title-bottom view {
		height: 10upx;
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
		
	}
	
	/* 点餐和评价底部的动态样式 */
	.active_top_title view {
		background-color: #F0AD4E;
	}
	
	/* 商品类型面板的动态样式*/
	.active_goods_category {
		background-color: white;
	}
	
	.qiehuan{
		height: 100%;
		display: flex;
		margin-top: 5upx;
	}
	
	.qiehuan .scroll-view-left {
		height: 100%;
		width: 35%;
	}
	
	.qiehuan .scroll-view-left view{
		padding: 10upx;
		line-height: 60upx;
	}
	
	.qiehuan .scroll-view-right {
		padding-right: 10upx;
		width: 65%;
		width: 100%;
	}
	
	/* 商家商品的信息展示 */
	.right-item {
		padding: 5upx;
		display: flex;
		justify-content: flex-start;
		
	}
	
	/*商家商品信息展示的右边数据*/
	.right-content {
		width: 100%;
	}
	
	.right-content view{
		line-height: 60upx;
		margin: 6upx;
		height: 60upx;
		width: 100%;
	}
	
	/* 商品价格和商品购物车的数量*/
	.content-count {
		display: flex;
		justify-content: space-between;
	}

	.view1 {
		overflow: hidden;
		overflow-wrap: break-word;
	}

	/* 购物车 */
	.buyer-cart {
		color: white;
		background-color: #000000;
		border-radius: 100upx;
		position: fixed;
		bottom: 10upx;
		left: 5%;
		right: 5%;
		align-items: center;
		z-index: 8999;
	}
	
	/* 去结账，好友代付 */
	.check-out-content {
		padding: 20upx;
		background-color: #F0AD4E;
		color: black;
		 /* border-radius: 100upx; */
		 border-top-right-radius: 100upx;
		 border-bottom-right-radius: 100upx;
		 display: flex;
		 flex-direction: column;
	}
	
	.cart-content {
		display: flex;
		justify-content: space-between;
	}
	
	.cart-image-text {
		display: flex;
		justify-content: flex-start;
	}
	.cart-text-first {
		display: flex;
		flex-direction: column;
		padding-left: 10upx;
		padding-top: 10upx;
		padding-bottom: 10upx;
	}

	/* 安全距离 */
	.submit-warp {
		position: fixed;bottom: var(--window-bottom);
		left: 0;
		right: 0;
		height: 0.5*200upx;
		line-height: 0.5*200upx;
		background: #fff;
	}
	
	/* 购物车弹窗 */
	 .cart-popup {
		 position: fixed;
		 bottom: 0;
		 left: 0;
		 right: 0;
		 height: 65%;
		 z-index: 7990;
		 background-color: white;
	 }
	 
	 /* 阴影样式 */
	.yinying {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 7000;
		opacity: 0.5;
	}
	
	/* 商品展示阴影 */
	.product-shadow {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9000;
		opacity: 0.5;
	}
	
	/* 商品信息弹出层 */
	.productInfo-popup {
		/* width: 400rpx; */
		width: 80%;
		left: 10%;
		right: 10%;
		/* height: 80%; */
		position: fixed;
		top: 25vh;
		/* bottom: 25vh; */
		/* left: 0; */
		/* right: 0; */
		z-index: 9999;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
	}
	
	/* 商家订单评论展示 */
	.commment-class {
		/* background-color: #888888; */
		/* height: 8000upx; */
		height: 100%;
		bottom: 0upx;
	}
	
	.scroll-view-comment {
		height: 100%;
	}
	
	.both-sides {
		margin-left: 0upx;
		width: 100%;
		display: flex !important;
		justify-content: space-between !important;
	}
	
</style>
